<template>
  <div :class="{'English':languageData.id=='English'}">
    <section id="cent" :updateStatusData="updateStatusData">
      <div class="box">
        <div class="center"  v-loading="loading" :element-loading-text="languageData.login.loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255,255,255,0.7)">
          <div class="clearfix topTextBox">
            <div class="topText clearfix" style="float: left">
              <div class="imgBoxs left">
                <img src="../../../static/img/icon/logo180.png" />
              </div>
              <div class="left">
                <!--<span class="topCon">找回密码</span>-->
              </div>
            </div>
            <div class="topText"  style="float: right;text-align: right">
              <el-button type="" size="mini" class="blu" @click="goPage('index')">首页</el-button>
              <el-button type="" size="mini" class="blu " @click="goPage('login')">登陆</el-button>
              <el-button type="primary" size="mini" class="blu topCon">找回密码</el-button>
            </div>
            <div class="cleae">
            </div>
          </div>
          <div class="faromBox" :code="code">
            <el-form label-position="right" label-width="100px" :model="formData" :rules="languageData.id=='Chinese'?rules:rules2" ref="formData">
              <el-form-item label="手机号：" prop="phone">
                <el-input  v-model="formData.phone" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item label="密码：" prop="password">
                <el-input type="password" v-model="formData.password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item label="确认密码：" prop="passwordCheck">
                <el-input type="password" v-model="formData.passwordCheck" placeholder="请再次输入密码"></el-input>
              </el-form-item>
              <el-form-item label="验证码：" prop="code">
                <el-input placeholder="请输入验证码" v-model="formData.code" class="code">
                  <template slot="append"   > <el-button type="" @click="getCode(formData.phone)" :disabled="codeText !='获取验证码'"> {{codeText}}</el-button> </template>
                </el-input>
              </el-form-item>
              <el-form-item >
                <div>
                  <el-button type="primary" class="submit" v-on:click="submitForm('formData')" >找回</el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </section>
    <section id="footer" :user="user"> </section>
  </div>
</template>
<style scoped>
  #cent{height: 860px;position: relative;width: 100%;overflow: hidden}
  .code{cursor: pointer}
  .submit {width: 100%;margin-top:40px ;margin-bottom: 10px}
  .faromBox{ width:400px;margin: auto; }
  .sev{margin-left: 5px;color:#409eff;font-size: 14px;cursor: pointer;text-decoration: underline;  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif}
  .box{width: 880px;height: 500px;position: absolute;top: 50%;left: 50%;}
  .center{width: 880px;height: 500px;position: absolute;top: -50%;left: -50%;background-color: #fff;padding: 60px;box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
  .topTextBox{ position: absolute;top: -70px;left: 0px;width: 100%}
  .topText{text-align: -moz-left;color: #333333;font-size:24px;line-height: 50px;font-size: 20px;width: 50%}

  .blu{ color: #000}
  .topCon{color: #fff}
  .imgBoxs{width: 100px;margin-right: 20px}
  .imgBoxs img{max-width: 100%}
  @keyframes errorName {
    form{top: 0px ; left: -15px;opacity: 0}
    to{ top: -18px;left: -15px ;opacity: 1; display: block}
  }
  /**英文样式覆盖**/
  .English .logoText{font-size: 16px;}
  .English .logo{font-size: 38px;}
</style>
<script>
  import HeaderPublc from '@/components/public/herder.vue'
  import Public from '@/vuex/public'
  import loginImg from '../../../static/img/icon/logo180.png'
  import { mapState, mapActions } from 'vuex'
  export default {
    name: 'my-login',

  created () {
    this.$store.commit('updateStatusTo', {body: null})
  },
    data () {
      var indeofCity = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请确认密码'));
        }
        setTimeout(() => {
          if (this.formData.password != value) {
            return callback(new Error('两次密码不一样'));
          }else {
            callback();
          }
        }, 300);
      };
      var checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('输入手机号码'));
        }


        if((this.checkPhon == value) && value){
          callback(new Error('该手机未注册！'));
        }else if(value){
          var url = Public.api + '/user/phoneIsExist'
          var  data = JSON.stringify(Public.publicLo.parmToken({phone:value}))

          this.$http.post(url, data, { emulateJSON: true }).then(function (res) {
            if(res.body.status ==109){
              callback();
            }else {
              callback(new Error('该手机未注册！'));
              this.checkPhon = value
            }
          })
        }


      };
      return {
        checkPhon:'',
        checked:'',
        codeText:'获取验证码',
        t:'',
        formData: {
          contactName: '', // 联系人姓名
          companyName:'',//公司名
          password: '', // 密码
          passwordCheck:'',
          phone:'',//手机
          code:'',//验证码
        },
        rules: {
          phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { validator: checkPhone, trigger: 'blur' },
          ],
          code: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入登陆密码', trigger: 'blur' },
          ],
          passwordCheck: [
            { required: true, message:'请确认新密码', trigger: 'blur' },
            { validator: indeofCity, trigger: 'blur' },
          ]
        },
        rules2: {
          phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
          ],
          code: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入登陆密码', trigger: 'blur' },
          ],
          passwordCheck: [
            { required: true, message:'请确认新密码', trigger: 'blur' },
            { validator: indeofCity, trigger: 'blur' },
          ]
        },
        loading:false
      }
    },
    methods: {
      ...mapActions({
        lognPost: 'loginFn',
        forgotPwdFn: 'forgotPwd',
        sendAuth: 'sendAuth'
      }),
      goBack(){
        this.$router.back()
         //this.$router.push({name:"index"})
      },
      login () {
        if (this.fromData.userName && this.fromData.password) {
          this.loading = true
          this.lognPost(this.fromData)
        }
//        this.$router.push({ name: 'map' })
      },
      // 登陆成功
      userFn (res) {
        // 登陆不成功 直接跳出 给出提示
        if (res.status != 0) {
         // this.error = true
         //  var that = this
         return
        }
        // 登陆成功之后 保存token 和用户信息 到本地
        res.data.userName = this.fromData.phone
        var users = JSON.stringify(res.data)
        var token = res.data.token
        Public.publicLo.sessionStorageSav('token', token)
        Public.publicLo.sessionStorageSav('user', users)
        // 查看又没记住密码

        // this.goBack()

        // 跳转到 首页
        if(res.data.type == 1){
          this.$router.push({ name: 'index' })
        }
        if(res.data.type == 0){
          this.$router.push({ name: 'AdminConfig' })
        }
      },
      //页面跳转
      goPage (name,a) {
        if(a){
          window.open(a)
        }
        this.$router.push({name: name})
      },
      // 获取验证码
      getCode(phone){
        this.timeOutFn()
        if(!phone){
          this.openError('请输入手机号！')
          return
        }
        var parm = {
          phone:phone+''
        }
        //发送验证
        this.sendAuth(parm)
      },
      //注册提交
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            var parm = {
              newPwd: this.formData.password, // 密码
              phone:this.formData.phone,//手机
              code:this.formData.code,//验证码
            }

           this.forgotPwdFn(parm)
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      listStatus (res) {
      var err = ""
      var success = ""

        switch (res.status){
          case 0:
            success =  this.languageData.id=='Chinese'? '密码已经成功找回！': 'register success'
            break
          case 102:
            err = '密码找回失败！请稍后重试'
            break
          case 107:
            err = '验证码不正确'
            break
          case 108:
            err = '手机号不正确'
            break
          case 109:
            err = '手机号已注册'
            break
          case 109:
            err = '注册失败'
            break
          default:
            err = '异常'
            break
        }
        if (err) {
          this.openError(err)
        }
        if(success){
          this.openSuccess(success)
          this.$router.push({name: 'login'})
        }
        // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
        this.$store.commit('updateStatusTo', {body: null})
      },
      // 到计时
      timeOutFn(){
        var index = 0
        var titme = 60
        var that = this

        this.t = setInterval(function () {
          if(!that && !that._isDestroyed){ //_isDestroyed 组件是否被销毁
            return;
          }
          if(index >= titme){
            that.codeText= '获取验证码'
            clearInterval(that.t)
          }else {
            that.codeText= (titme-index)+'秒后获取'
            index++
          }
        },1000)
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message({
          message: text,
          type: 'error'
        })

      },
    },
    computed: {
      languageData: function () {
        var parm = this.language
        if (parm) {
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
//            dom.style = 'width:620px'
          }
//          // 替换 其他交互数据
//          this.updateDate(parm)
        }
        return parm
      },
      user: function () {
        var parm = this.userData
        var res = false
        if (parm) {
          this.userFn(parm)
          res = true
        }
        return res
      },
      code: function () {
        var parm = this.codeData
        if (parm) {
          if(parm.body.status == -1 ){
            this.openSuccess('验证码发送成功！')
          }
          if(parm.body.status != -1){
            this.openError('验证码发送失败！')
          }
          this.$store.commit('commitSendAuth',  null)
        }
        return 1
      },
      updateStatusData: function () {
        var parm = this.updateStatus
        if (parm) {
          this.listStatus(parm)
        }
        return 1
      },
      ...mapState([
        'language',
        'userData',
        'codeData',
        "updateStatus"
      ])
    },
    mounted () {

    },
    components: {
       HeaderPublc: HeaderPublc
    }
  }
</script>

